<template>
	<view>
		<Navbar :hideBtn="true" bgColor="#f3f4f6"></Navbar>
		<view class="profile-top">
		  <view class="user-info">
			<view>
			  <view class="user-info--name">{{ user.nickName }}</view>
			  <text class="user-info--account">{{ user.email || user.phonenumber || user.userName }}</text>
			</view>
			<view>
			  <u-avatar :src="user.avatarUrl" size="120rpx" @click="clickToRefresh"></u-avatar>
				<!-- <u--image
					radius="4"
					src="/static/img/avatar.png"
					width="60px"
					height="60px"
				></u--image> -->
			</view>
		  </view>
		  <view style="padding: 40rpx 40rpx 0 40rpx;">
			<view class="profile-rule">
			  <u-row>
				<u-col span="8">
				  <view style="color: white; font-size: 15px;">{{ user.deptName ? user.deptName : '未知部门' }}</view>
				</u-col>
				<u-col span="6">
				  <!-- <u-button :text="user.teamName" style="height: 36px;"></u-button> -->
				  <u-tag icon="account-fill" :text="user.teamName" shape="circle" style="height: 26px;"></u-tag>
				</u-col>
			  </u-row>
			</view>
		  </view>
		</view>
		<!-- <view style="padding: 40rpx; background-color: #fff;">
		  <u-grid>
			<u-grid-item @click="changeDeptShow = true">
			  <u-icon name="account-fill" color="#2979ff" size="60rpx"></u-icon>
			  <text class="btn-text">调整班组</text>
			</u-grid-item>
		  </u-grid>
		</view> -->
		<view style="padding: 24rpx; background-color: #fff;">
			<u-cell-group :border="false">
				<u-cell
					title="调整班组"
					icon="/static/mine/setting.png"
					@click="changeDeptShow = true"
					 :isLink="true"
				></u-cell>
				<u-cell
				        title="我的审核"
						icon="/static/mine/audit.png"
				    	isLink
						url="/pages/center/auditList"
				    >
					<text slot="value" class="u-slot-value" v-if="applyMineCount>0">{{applyMineCount}}</text>
				</u-cell>
				<!-- <u-cell
				        title="其他班组"
						icon="/static/mine/audit.png"
				    	isLink
						url="/pages/center/auditList"
				    >
					<uni-data-checkbox multiple v-model="checkbox1" :localdata="hobby"></uni-data-checkbox>
				</u-cell> -->
				<u-cell
					title="其他班组权限"
					icon="lock-fill"
					v-if="otherTeams.length>0"
				></u-cell>
				<u-cell value="" 
					v-if="otherTeams.length>0">
				    	<view
				    	    slot="title"
				    	    class="u-slot-title"
				    	>
						<uni-data-checkbox multiple v-model="selectedTeams" :localdata="otherTeams"></uni-data-checkbox>
				    	</view>
				    </u-cell>
			</u-cell-group>
		</view>

		<ChangeDept :show="changeDeptShow" :user="user" 
			@close="changeDeptShow = false" 
			@refresh="refreshCurUser" v-if="user.teamName"></ChangeDept>
			
			<u-modal
				:content="userInfo"
				title="刷新成功"
				:show="userInfoShow"
				@confirm="userInfoShow = false"
			></u-modal>
	</view>
</template>

<script>
import Navbar from '@/components/navbar/Navbar';
import ChangeDept from '@/components/definedialog/changeDept';
import storage from '@/utils/storage';
import * as UserApi from '@/api/user'
import { ACCESS_TOKEN } from '@/store/mutation-types'

export default {
  components: {
    Navbar,
    ChangeDept,
  },
  data () {
    return {
      user: {},
      changeDeptShow: false,
	  applyMineCount: 0,
	  clickCount: 0,
	  userInfo: "test",
	  userInfoShow: false,
	  selectedTeams: [],
	  otherTeams: [],
    }
  },
  onShow() {
	  this.clickCount = 0;
	  this.loadUserFromCache();
  },
  created () {
    this.getUserInfoByToken();
  },
  methods: {
	clickToRefresh() {
		UserApi.getUserInfoByToken().then(response => {
			const result = response;
			if (result && result.data) {
				// 过期时间30天
				const expiryTime = 30 * 86400;
				// 保存tokne和userId到缓存
				storage.set(ACCESS_TOKEN, result.data.token, expiryTime);
				// commit('SET_USER', result.data);
				
				let curUser = result.data;
				this.userInfo = `产地：${curUser.deptName} \n 
					班组：${curUser.teamName} \n 
					Token：${curUser.token}
					员工: ${curUser.at ? curUser.at.employeeId : '待赋权' }
					菜单: ${curUser.at ? curUser.at.menus : '待赋权'}`;
				this.userInfoShow = true;
				
			}
		}).then(res => {
			console.log("test:", this.userInfo);
		});
	},
	loadUserFromCache() {
		this.$store.dispatch('Info').then(res => {
			console.log("刷新获取最新用户:", res);
			this.user = res;
			if (this.user && !this.user.deptId) {
				this.changeDeptShow = true;
				return;
			} else {
				if (this.user.at) {
					this.otherTeams = this.user.at.otherTeams || [];
					this.selectedTeams = this.user.at.selectedTeams || [];
				}
			}
		});
	},
    getUserInfoByToken () {
	  this.$store.dispatch('InfoRefresh').then(res => {
		console.log("我的页面，刷新获取最新用户:", res);
		this.user = res;
		if (this.user && !this.user.deptId) {
			this.changeDeptShow = true;
			return;
		}
	  });
    },
	refreshCurUser(res) {
		console.log("我的页面，分厂保存回调:", res);
		if (!res) {
			return;
		}
		this.user = res;
		if (this.user && !this.user.deptId) {
			this.changeDeptShow = true;
			return;
		}
	},
    navigateTo (url) {
      uni.navigateTo({ url: url })
    },
    logout () {
      const app = this
      app.$store.dispatch('Logout').then(res => {
        uni.reLaunch({
          url: '/pages/login/index'
        })
      })
    }
  }
}
</script>

<style lang="scss">
.profile-top {
  background-color: #f3f4f6;
  padding-top: 50rpx;
}

.profile-rule {
  height: 160rpx;
  line-height: 140rpx;
  padding: 0px 80rpx;
  background-color: $u-main-color;
  border-radius: 16px 16px 0 0;
  box-shadow: 0px 16px 26px rgba(0, 0, 0, .8);
}
.btn-text {
  font-size: 28rpx;
  color: #606266;
}

.user-info {
  display: flex;
  justify-content: space-between;
  padding: 40rpx;
  max-width: 100%;
  color: #303133;

  &--name {
    font-size: 56rpx;
    font-weight: bold;
    width: 100%
  }

  &--account {
    font-size: 26rpx;
    color: #909399;
  }

}

.cell-page {
	padding-bottom: 20px;
}

.cell-box {
	&__title {
		font-size: 14px;
		color: rgb(143, 156, 162);
		margin: 20px 0px 0px 15px;
	}

	&__block {
		// background-color: #fff;
		margin-top: 20px;
	}
}

.u-page {
	padding: 0;

	&__item {

		&__title {
			color: $u-tips-color;
			background-color: $u-bg-color;
			padding: 15px;
			font-size: 15px;

			&__slot-title {
				color: $u-primary;
				font-size: 14px;
			}
		}
	}
}

.u-slot-title {
	@include flex;
	flex-direction: row;
	align-items: center;
}

.u-cell-text {
	font-size: 15px;
	line-height: 22px;
	color: #303133;
	margin-right: 5px;
}

.u-slot-value {
	line-height: 17px;
	text-align: center;
	font-size: 10px;
	padding: 0 5px;
	height: 17px;
	color: #FFFFFF;
	border-radius: 100px;
	background-color: #f56c6c;
}
</style>